<script>
/**
 * @desc '钱包'页面中的'当前月份的预算'
 */

import { mapState, mapMutations } from 'vuex'
import eyeOpen from '@/assets/icons/eye-open.svg'
import eyeClose from '@/assets/icons/eye-close.svg'

const date = new Date()

export default {
  name: 'month-budget-panel',
  data: () => ({
    eyeOpen,
    eyeClose,
    money: 2650.5,
    year: date.getFullYear(),
    month: date.getMonth() + 1
  }),
  computed: {
    ...mapState('Wallet', ['isVisible']),
    moneyText() {
      return this.isVisible ? this.money : '****'
    }
  },
  methods: {
    ...mapMutations('Wallet', ['handleVisible'])
  }
}
</script>

<template>
  <div :class="$sty.budgetPanel">
    <div :class="$sty.layer">
      <div :class="$sty.topBar">
        <p :class="$sty.bookName">生活账本</p>
        <div :class="$sty.date">
          <p :class="$sty.year">{{year}}年</p>
          <p :class="$sty.month">{{month}}月</p>
        </div>
      </div>

      <p :class="$sty.moneyTitle">预算余额</p>
      <p :class="$sty.moneyBar">
        <span :class="$sty.currency">￥</span>
        <span :class="$sty.money">{{moneyText}}</span>
        <img
          :class="$sty.eye"
          :src="isVisible?eyeOpen:eyeClose"
          @click="handleVisible"
          mode="aspectFill"
        >
      </p>
    </div>
  </div>
</template>

<style lang="scss" module>
@import './styles.scss';
</style>
